<template>
  <div class="wrapper">
    <template v-if="list.length > 0">
      <router-link tag="div" :to="'/center/bankAdd/' + item.id" class="item" v-for="item of list" :key="item.id">
        <h3>
          {{ item.bank }}
          <span>{{ item.address }}</span>
        </h3>
        <h2>{{ item.number }}</h2>
      </router-link>
    </template>
    <template v-else>
      <p style="font-size: 0.32rem; margin: 0.2rem 0; text-align: center;">没有数据</p>
    </template>
    <router-link to="/center/bankAdd/none">
      <BigBtn text="添加银行卡" />
    </router-link>
  </div>
</template>

<script>
  import BigBtn from '@/components/bigBtn/BigBtn.vue'
  import { mapState } from 'vuex'
  export default {
    name: 'BankList',
    components: {
      BigBtn
    },
    created() {
      this._getList()
    },
    data() {
      return {
        list: []
      }
    },
    computed: {
      ...mapState(['openId'])
    },
    methods: {
      async _getList() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/bank/show',
          method: 'GET',
          params: {
            openid: this.openId
          }
        })
        if (code === 0) {
          this.list = data.items
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    min-height:100vh;
    padding-top: 0.2rem;
    background: #eee;
  }
  .item {
    margin: 0rem 0.2rem 0.2rem;
    padding: 0.2rem 0.4rem;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 2px 0px #7a7a7a;
    h3 {
      font-size: 0.32rem;
      margin-bottom: 0.2rem;
      span {
        font-size: 0.24rem;
      }
    }
    h2 {
      font-size: 0.4rem;
      text-align: right;
    }
  }
</style>
